import { useState, useEffect, useContext } from "react";
import { Drawer, Button } from "@arco-design/web-react";

import { templateContext, pageContext } from "@/store/templateContext";

function Blocks({ list, section, onChange }) {
    const { dispatch } = useContext(templateContext);

    function handleBlock(item) {
        fetch(`http://localhost:3030/api/sections/config?sectionName=${section}&template=${item.template}`, {
            method: "get",
            headers: {
                "Content-Type": "application/json"
            }
        })
            .then((data) => data.json())
            .then(({ data }) => {
                data.schema["id"] = section;
                dispatch({ type: "setTemplate", data: item.template });
                dispatch({ type: "setGlobal", data: data.global.global });
                dispatch({ type: "setCurrentSection", data: data.schema });
                dispatch({ type: "previewPostMessage" });
                onChange();
            });
    }
    return (
        <div className="grid  gap-3 grid-cols-2 ">
            {list.map((item, idx) => (
                <div
                    key={idx}
                    onClick={() => handleBlock(item)}
                    className="rounded-md w-full cursor-pointer overflow-hidden border border-solid border-gray-200 relative">
                    <img className="w-full h-[200px] object-contain bg-white align-top" src={`http://localhost:3030${item.imgUrl}`} />
                    <div className="p-2 bg-gray-200   absolute bottom-0 leading-none left-0">{item.template}</div>
                </div>
            ))}
        </div>
    );
}

function TempBlockAll({ onChange }) {
    const [list, setList] = useState([]);

    const [cuurent, setCuurent] = useState(0);

    useEffect(() => {
        fetch("http://localhost:3030/api/template/block/all", {
            method: "get",
            headers: {
                "Content-Type": "application/json"
            }
        })
            .then((data) => data.json())
            .then(({ data }) => {
                setList(Object.values(data));
            });
    }, []);
    return (
        <div className="w-full h-full flex">
            <div className="w-[200px] h-full overflow-y-auto">
                <div className="flex-wrap flex-col flex gap-3">
                    {list.map((item, index) => (
                        <div
                            key={index}
                            onClick={() => {
                                setCuurent(index);
                            }}
                            className={`px-3 border cursor-pointer rounded-md border-gray-100 border-solid ${index == cuurent ? "bg-gray-100" : ""}`}>
                            <div className="font-bold flex justify-between py-3">
                                <span>{item.name}</span>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <div className="flex-1 h-full overflow-y-auto px-3">
                {list.length >0 && (
                    <Blocks
                        onChange={() => {
                            onChange();
                        }}
                        section={list[cuurent].section}
                        list={list[cuurent].list}
                    />
                )}
            </div>
        </div>
    );
}

export default function ({ onChange }) {
    const [visible, setVisible] = useState(false);
    return (
        <div>
            <Button
                className="w-full"
                onClick={() => {
                    setVisible(true);
                }}
                type="primary">
                选择积木
            </Button>
            <Drawer
                width={"50vw"}
                title="选择积木"
                visible={visible}
                placement="left"
                footer={null}
                onCancel={() => {
                    setVisible(false);
                }}>
                <TempBlockAll
                    onChange={() => {
                        setVisible(false);
                        onChange();
                    }}
                />
            </Drawer>
        </div>
    );
}
